iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
2
自我挑戰組

向CSScoke重新學習CSS系列 第 3

第三天:開始使用XMind 做CSS的心智圖筆記

  • 分享至 

  • xImage
  •  

觀看金魚都能懂的網頁設計入門:1-7天

由於這次是想要對CSS做更進一步學習,就沒有再對HTML做多的筆記,若對HTML不了解的小金魚們,可以直接觀看CSScoke老師的youtube,觀看金魚都能懂的網頁設計入門鐵人賽1-4天,就能對HTML有更多的認識。
雖然原本就有HTML架構的基礎,但在看完1-4天的影片,更多的是對 HTML語意化應用更加明白。

基本 CSS 寫法

段落:
    文字色彩 紅色
    字體大小 20px
    背景色彩 灰色

對 p 這個html的標籤加上這些樣式(標籤選擇器)

p{
 color: red;
 text-font: 20px;
 background: gray;
}

對 mic 這個class加上這些樣式 (類別選擇器)

.mic{
 color: red;
 text-font: 20px;
 background: gray;
}

CSS 撰寫位置 p.s 針對專案狀況,採用適合寫法,沒有絕對

  1. 可以在直接在標籤上做撰寫
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color:red;" >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto porro nobis tenetur, repellat ab fuga. Error libero accusamus voluptates.</p>
</body>
</html>
  1. 可以在head裡頭加入style做撰寫
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto porro nobis tenetur, repellat ab fuga. Error libero accusamus voluptates.</p>
</body>
</html>
  1. 可以在html檔head裡頭增加link加入新開立新檔 all.css 來做撰寫
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="all.css">
</head>
<body>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto porro nobis tenetur, repellat ab fuga. Error libero accusamus voluptates.</p>
</body>
</html>

使用心智圖做 CSS 筆記

這是我認為非常重要的一段,因為前端要學的東西越來越多,我們腦容量也沒那麼大,因此善用工具做筆記真的很重要。

https://ithelp.ithome.com.tw/upload/images/20200917/20122044ncl67IhbRg.png


上一篇
第二天:學習CSS前,先要知道HTML的基本標籤
下一篇
第四天:盒模型計算
系列文
向CSScoke重新學習CSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言